import React, { Component } from 'react'
// 高阶函数、高阶组件=>函数=>如果返回的是函数，高阶函数|如果返回的是组件，高阶组件
function myHoc(Com) {
    return class index extends Component {
        state = {
            xSize: document.documentElement.clientWidth,
            ySize:  document.documentElement.clientHeight
        }
        setSize= () => {
            this.setState({
                xSize: document.documentElement.clientWidth,
                ySize:  document.documentElement.clientHeight
            })
        }
        componentDidMount() {
            window.addEventListener('resize', this.setSize)
        }
        componentWillUnmount() {
            window.removeEventListener('resize', this.setSize)
        }
        render() {
            return (
                <div>
                    <Com {...this.state} />
                    高阶组件
                </div>
            )
        }
    }
}


// 展示出屏幕的尺寸大小
class A extends Component {
    render() {
        console.log(this.props)
        return <div>
            <h3>A组件</h3>
            xSize：{ this.props.xSize }
            ySize: { this.props.ySize }
        </div>
    }
}

// 展示出屏幕的尺寸大小
class B extends Component {
    render() {
        return <div style={{color: "red"}}>
            <h3>B组件</h3>
            xSize：{ this.props.xSize }
            ySize: { this.props.ySize }
        </div>
    }
}

A = myHoc(A)
B = myHoc(B)

class index extends Component {
    render() {
        return (
            <div>
                <A/>
                <B/>
            </div>
        )
    }
}
export default index